<template>
    <button @click="showComponent=MyLeft">展示左组件</button>
    <button @click="showComponent=MyRight">展示右组件</button>
    <KeepAlive>
        <component :is="showComponent"></component>
    </KeepAlive>
    <div>
        count的值：{{ count }}
        <button @click="count++">+1</button>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, shallowRef } from 'vue';

const count = ref(0)
import MyLeft from './MyLeft.vue';
import MyRight from './MyRight.vue';
const showComponent = shallowRef(MyLeft)
onMounted(()=>{
    console.log('MyLeft组件被挂载');
})
onUnmounted(()=>{
    console.log('MyLeft组件被销毁');
})
</script>

<style scoped>

</style>